<template>
	<view style="background: #F7F7F7;height: 100vh;">
		<view class="withdraw-container">

			<view class="top-header" v-if="user">
				<image :src="user.avatar" class="header-img" mode="aspectFill"></image>
				<view class="t0">
					{{ user.nickname }}
				</view>
				<view class="t0">
					{{ user.mobile }}
				</view>
				<view class="t1" @click="towithdrawList">
					<text>提现记录</text>
					<image src="../../static/images/account/beifen1.png" mode=""></image>
				</view>
			</view>
			<view class="form-box">
				<uv-form ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData" label-width="120px"
					errorType="toast">
					<uv-form-item label="可提现金额(元)" v-if="user">
						<uni-easyinput v-model="user.money" disabled />
					</uv-form-item>
					<uv-form-item label="姓名" prop="name" required>
						<uni-easyinput v-model="dynamicFormData.name" placeholder="请输入姓名" />
					</uv-form-item>
					<uv-form-item label="支付宝账户" prop="account" required>
						<uni-easyinput v-model="dynamicFormData.account" placeholder="请输入支付宝账户" />
					</uv-form-item>
					<uv-form-item label="验证码" required prop="code">
						<uni-easyinput v-model="dynamicFormData.code" placeholder="请输入验证码">
							<template #right>
								<view @tap="postMsg" class="codeTips">{{tip}}</view>
							</template>
						</uni-easyinput>
					</uv-form-item>
					<uv-form-item label="提现金额(元)" required prop="money">
						<uni-easyinput v-model="dynamicFormData.money" placeholder="请输入提现金额" />
					</uv-form-item>
				</uv-form>
				<!-- <view class="remark-tip">备注：最少提现10元</view> -->
			</view>
			<button size="mini" @click="submit('dynamicForm')" class="btn">立即提现</button>

			<view class="warm-tip">
				温馨提示:
				<br />
				1.可提现时间为国家法定工作日，9:00~16:00。
				<br />
				2.每天只能提现一次。
				<br />
				3.提现后，第二天到账。
				<br />
				4.最低提现金额10元。
				<br />
				5.提现手续费：1%。
			</view>
		</view>
		<uv-code ref="code" :seconds="60" @change="codeChange" class="button"></uv-code>
	</view>
</template>

<script>
	import api from '@/api/index2.js';
	export default {
		data() {
			return {
				user: null,
				// 数据源
				dynamicFormData: {
					name: '',
					money: '',
					account: '',
					code: ''
				},
				tip: '', //验证码倒计时提示
				// 规则
				dynamicRules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					money: [{
						required: true,
						message: '请输入提现金额',
						trigger: ['blur', 'change']
					}],
					account: [{
						required: true,
						message: '请输入支付宝账户',
						trigger: ['blur', 'change']
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		onReady() {
			this.$refs.dynamicForm.setRules(this.dynamicRules);
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			codeChange(text) {
				this.tip = text
			},
			// 发送验证码
			postMsg() {
				// if (!this.dynamicFormData.account) {
				// 	return uni.showToast({
				// 		icon: "none",
				// 		title: '请输入支付宝账户！'
				// 	});
				// }
				if (this.$refs.code.canGetCode) {
					uni.showLoading({
						icon: "none",
						title: '正在获取验证码'
					})

					let params = {
						mobile: this.user.mobile,
						event: 'withdraw'
					}
					api.sendCode(params).then(res => {
						uni.hideLoading();
						uni.showToast({
							title: res.msg
						})
						this.$refs.code.start();
					})

				} else {
					uni.showToast({
						title: "倒计时后再发送！",
						icon: "none",
					})
				}
			},
			getUserInfo() {
				api.getUserInfo().then(res => {
					this.user = res.data;
					this.dynamicFormData.name = res.data.realname
					this.dynamicFormData.account = res.data.alipay
				});
			},
			gotoAuth() {
				uni.navigateTo({
					url: '/pages/account/identityAuthentication'
				});
			},
			towithdrawList() {
				uni.navigateTo({
					url: '/pages/account/withdrawList'
				});
			},
			submit(form) {
				// if (this.isAuth == false) {
				// 	uni.showToast({
				// 		title: '请先进行实名认证！'
				// 	});
				// 	return uni.reLaunch({
				// 		url: '/pages/account/identityAuthentication'
				// 	});
				// } else {
				this.$refs[form].validate()
					.then(res => {
						api.withdraw(this.dynamicFormData).then(res => {
							if (res.code) {
								uni.showToast({
									icon: "none",
									title: res.msg
								})
								this.dynamicFormData.money = ''
								this.dynamicFormData.code = ''
								setTimeout(() => {
									this.getUserInfo()
								}, 2000)
							}
						});
					})
					.catch(err => {
						console.log('表单错误信息：', err);
					});
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	.withdraw-container {
		background: url('../../static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;

		.top-header {
			text-align: center;

			.header-img {
				margin-top: 30rpx;
				border-radius: 50%;
				overflow: hidden;
				width: 100rpx;
				height: 100rpx;
			}

			.t0 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 50rpx;
				font-style: normal;
			}

			.t1 {
				background: #ffffff;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(20, 135, 255, 0.4);
				border-radius: 24rpx;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 2rpx 22rpx;
				margin-top: 32rpx;
				margin-bottom: 40rpx;

				uni-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #49a1fd;
					line-height: 40rpx;
					font-style: normal;
				}

				uni-image {
					width: 14rpx;
					height: 24rpx;
					margin-left: 6rpx;
				}
			}
		}

		.form-box {
			margin: 0 14px;
			background: url('/static/images/home/empty-bg.png') no-repeat;
			background-size: 100% 100%;
			padding: 52rpx 42rpx;

			.codeTips {
				color: #2f9afe;
				font-size: 24rpx;
				margin-right: 10rpx;
			}

			.remark-tip {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #49a1fd;
				line-height: 24rpx;
				margin-top: 20rpx;
				font-style: normal;
			}
		}

		.btn {
			background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 88rpx !important;
			text-align: right;
			font-style: normal;
			height: 88rpx;
			margin: 36rpx 28rpx;
			width: calc(100% - 56rpx);
			text-align: center;
			border: none;

			&:after {
				border: none;
			}
		}

		.warm-tip {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #a7a5a5;
			line-height: 52rpx;
			font-style: normal;
			padding: 0 32rpx;
		}
	}
</style>